<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../static/vue/vue.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
</head>
<body>
<div id="vueTest">
    <div v-html="message"></div>
</div>

<div id="vueButton">
    <button v-on:click="messgClik">点击弹框</button>
</div>

<div id="ajax">
    <div
        v-for = "si in data"
    >
        {{si.name}}
    </div>
</div>

<div id="app">
    <p>单个复选框：</p>
    <input type="checkbox" id="checkbox" v-model="checked">
    <label for="checkbox">{{ checked }}</label>

    <p>多个复选框：</p>
    <input type="checkbox" id="runoob" value="Runoob" v-m odel="checkedNames">
    <label for="runoob">Runoob</label>
    <input type="checkbox" id="google" value="Google" v-model="checkedNames">
    <label for="google">Google</label>
    <input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames">
    <label for="taobao">taobao</label>
    <br>
    <span>选择的值为: {{ checkedNames }}</span>
</div>

<div>
    <div id="copDiv">我是复制的文本内容</div>
    <button id="btn" >点我复制</button>
</div>
<style type="text/css">
    .wrapper {position: relative;}
    #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}
</style>
<div class="wrapper">
    <p id="text">我是复制文本的内容？</p>
    <textarea id="input"></textarea>
    <button onclick="copyText()">点我复制</button>
</div>



<script type="text/javascript">

function copyText(){
    window.getSelection().removeAllRanges(); // 移除选中的元素 保证剪切板为空再复制
    var copyDOM = document.querySelector('#text'); //指定的DOM元素
    var range = document.createRange(); // 创建容器
    range.selectNode(copyDOM); // 选中需要复制的节点
    window.getSelection().addRange(range); // 执行选中元素
    var successful = document.execCommand('copy');// 执行 copy 操作
    try {
        var msg = successful ? 'successful' : 'unsuccessful';
        console.log('Copy was ' + msg);
    } catch(err) {
        console.log('unable to copy');
    }
    window.getSelection().removeAllRanges(); // 移除选中的元素
    alert("复制成功")
    //$(".success").show();
}

/*

    const btn = document.getElementById('#btn');
    btn.addEventListener('click', () => {
        const input = document.getElementById("#copDiv").innerText;
    input.select();
    if (document.execCommand('copy')) {
        document.execCommand('copy');
        console.log('复制成功');
    }
    })
    var vue = new Vue({
        el:"#vueTest",
        data:{
            message:'vue开发入门测试',
        }
    })

    new Vue({
        el:"#vueButton",
        data:{
            message:"按钮测试"
        },
        methods:{
            messgClik:function(){
                alert(this.message);
            }
        }
    })

    //测试Vue的ajax
    new Vue({
        el:"#ajax",
        data(){
            return{
                data:null
            }
        },
        mounted (){
            axios
                .get("http://localhost:8088/EasyAdmin/user/ajaxTestData")
                .then(response=>(this.data = response.data))
                .catch(function(error){
                    alert(error)
            });
        }
    })

    new Vue({
        el:"#app",
        data:{
            checked:true,
            checkedNames:[]
        }
    })


        axios.post("http://localhost:8088/EasyAdmin/user/ajaxTestData",{
            name:'wangbo',
    })
            .then(response=>(alert(response.data)))
            .catch(function(error){
                alert(error)
            })

    $http.jsonp("http://www.baidu.com").then(function(result){
        alert(result)
    })

   /!* const axios = require("axios");

    axios.get("").then(
        function(response){
            console.log(response)
        }
    )
        .catch(function(response){
            consloe.log(response);
        })*!/

function copyclik(){
       var text = document.getElementById("copDiv").innerText;
       var input = document.getElementById("input");
       input.value = text;
       input.select();
       document.("copy");
       alert("复制成功")
     //copyText(text);
}


    function copyText(obj) {
        // if (!obj) {
        //     return false;
        // }
        // var text;
        // if (typeof(obj) == 'object') {
        //     if (obj.nodeType) { // DOM node
        //         obj = $(obj); // to jQuery object
        //     }
        //     try {
        //         text = obj.text();
        //         if (!text) { // Maybe <textarea />
        //             text = obj.val();
        //         }
        //     } catch (err) { // as JSON
        //         text = JSON.stringify(obj);
        //     }
        // } else {
        //     text = obj;
        // }
        // //var $temp = $('<input>'); // Line feed is not supported
        // var $temp = $('<textarea>');
        // $('body').append($temp);
        // $temp.val(text).select();
        // var res = document.execCommand('copy');
        // $temp.remove();
        // return res;
    }
*/

</script>
</body>
</html>